<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: #F7F8FA;
        /* background-color: red; */
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    html {
        /* font-size: 100px; */
    }

    .header {
        height: 60px;
        background-color: #fff;
        box-shadow: 0px 0px 5px #ccc;
    }

    .main {
    }

    .card {
        background-color: #fff;
        margin-top: 20px;
        border-radius: 4px;
        /* min-height: 200px; */
    }

    .card-0 {
        width: 4.8rem;
        height: 200px;
    }

    .col-right {
        display: inline-block;
        flex: 2;
    }

    .col-left {
        display: inline-block;
        flex: 1;
    }

    .card-1 {
        height: 200px;
        width: 100%;
        margin-left: 20px;
        /* background-color: red; */
    }

    .card-2 {
        height: 200px;
        width: 100%;
        margin-left: 20px;
        /* background-color: red; */
    }
    .color {
        color: aqua;
        font-size: 1.6rem;
    }
</style>
<script>
    // 方式一：
    // window.onload = () => {
    //     console.log(document.getElementsByTagName('html'));
    //     document.getElementsByTagName('html')[0].style.fontSize = '100px'
    // }

    // 方式二：
    window.onload = () => {
        let designSize = 750; // 设计图尺寸
        let html = document.documentElement;
        let wW = html.clientWidth;// 窗口宽度
        let rem = wW * 100 / designSize;   //  视口宽度 *  100 /   设计稿
        document.documentElement.style.fontSize = rem + 'px'; // 50px = 1rem

        console.log("designSize", designSize, '--', 'wW:', wW , '--', "rem", rem)

        header.style.cssText = 'background: red;'  // 两种 添加样式的 方式
        header.classList.add('color')    // 两种 添加样式的 方式  remove()  就是 移除的
        console.log(header)   //  id  是可以直接 拿到 html 的
    }
</script>

<body>
    <header id="header" class="header">111</header>

    <div class="main">
        <div class="col-left">
            <div class="card card-0">

            </div>
        </div>

        <div class="col-right">
            <div class="card card-1">

            </div>
            <div class="card card-2">

            </div>
        </div>
    </div>
</body>

</html>